import React, { useState } from 'react'
import Header from '../../components/Header/Header'
import { Button, Form, Input, Toast } from "antd-mobile"
import { reqregister } from '../../http/api'

export default function Register(props) {

  const [user, setUser] = useState({
    phone: "",
    nickname: "",
    password: ""
  })

  // 注册
 const doRegister=()=>{
        reqregister(user).then(res=>{
          if(res.data.code==200){
            Toast.show({ content: res.data.msg })
            props.history.push("/login")
          }
        })
 }
  return (
    <div>
      <Header back title="注册"></Header>

      <div>user:{JSON.stringify(user)}</div>

      <Form layout='horizontal'>
        <Form.Item label='账号' name='phone'>
          <Input placeholder='请输入账号' clearable value={user.phone} onChange={e => setUser({ ...user, phone: e })} />
        </Form.Item>
        <Form.Item label='用户名' name='nickname'>
          <Input placeholder='请输入用户名' clearable value={user.nickname} onChange={e => setUser({ ...user, nickname: e })} />
        </Form.Item>
        <Form.Item label='密码' name='password'>
          <Input placeholder='请输入密码' clearable value={user.password} onChange={e => setUser({ ...user, password: e })} />
        </Form.Item>
      </Form>
      <Button block shape='rounded' color='primary' onClick={()=>doRegister()}>
        注册
      </Button>

    </div>
  )
}
